<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件管理 - 笔记云</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome图标 -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#334155',
            success: '#10B981',
            warning: '#F59E0B',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              800: '#333333'
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          backgroundImage: {
            'gradient-primary': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            'gradient-secondary': 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
            'gradient-success': 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)',
            'gradient-warning': 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
            'hero-pattern': "url('/static/image/wallhaven-g7gxqq.webp')",
            'file-pattern': "url('/static/image/wallhaven-72pgxv.webp')",
            'upload-pattern': "url('/static/image/wallhaven-wq3yop.webp')",
          }
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-md transition-all hover:bg-primary/90 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
      }
      .btn-secondary {
        @apply bg-neutral-200 text-neutral-700 px-4 py-2 rounded-md transition-all hover:bg-neutral-300 active:scale-95;
      }
      .btn-success {
        @apply bg-success text-white px-4 py-2 rounded-md transition-all hover:bg-success/90 active:scale-95;
      }
      .btn-icon {
        @apply w-10 h-10 flex items-center justify-center rounded-md transition-all hover:bg-neutral-100 active:scale-95;
      }
      .file-item {
        @apply relative group cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-105;
      }
      .file-item-selected {
        @apply ring-2 ring-primary bg-primary/5;
      }
      .upload-area {
        @apply border-2 border-dashed border-neutral-300 rounded-lg transition-all duration-300;
      }
      .upload-area-active {
        @apply border-primary bg-primary/5 border-solid transform scale-105 shadow-lg;
      }
      .file-thumbnail {
        @apply transition-all duration-300 hover:scale-110 hover:shadow-lg;
      }
      .loading-shimmer {
        @apply animate-pulse bg-gradient-to-r from-neutral-200 via-neutral-100 to-neutral-200;
      }
      .glass-effect {
        @apply backdrop-blur-sm bg-white/80 border border-white/20;
      }
    }
  </style>
</head>

<body class="font-sans text-neutral-800 bg-neutral-50">
  <!-- 页面容器 -->
  <div id="app">
    <!-- 加载指示器 -->
    <div id="loading" class="fixed inset-0 bg-white/80 flex items-center justify-center z-50 hidden">
      <div class="text-center">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
        <p class="text-neutral-600">加载中...</p>
      </div>
    </div>

    <!-- 通知组件 -->
    <div id="notification" class="fixed top-4 right-4 z-40 hidden">
      <div class="bg-white border border-neutral-200 rounded-lg shadow-lg p-4 max-w-sm">
        <div class="flex items-center gap-3">
          <div id="notification-icon" class="flex-shrink-0"></div>
          <div>
            <p id="notification-message" class="text-sm font-medium"></p>
          </div>
          <button id="notification-close" class="flex-shrink-0 text-neutral-400 hover:text-neutral-600">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-neutral-200 sticky top-0 z-30">
      <div class="flex items-center justify-between px-4 py-3">
        <!-- 左侧：返回按钮和标题 -->
        <div class="flex items-center gap-4">
          <button 
            id="back-btn"
            class="p-2 rounded-md hover:bg-neutral-100 transition-colors"
            title="返回仪表盘"
          >
            <i class="fa fa-arrow-left text-neutral-600"></i>
          </button>
          
          <div class="flex items-center gap-2">
            <i class="fa fa-folder-open text-primary text-xl"></i>
            <span class="text-lg font-bold text-primary">文件管理</span>
          </div>
        </div>

        <!-- 右侧：操作按钮 -->
        <div class="flex items-center gap-3">
          <!-- 视图切换 -->
          <div class="flex items-center bg-neutral-100 rounded-md p-1">
            <button id="grid-view-btn" class="btn-icon w-8 h-8 bg-primary text-white" title="网格视图">
              <i class="fa fa-th"></i>
            </button>
            <button id="list-view-btn" class="btn-icon w-8 h-8" title="列表视图">
              <i class="fa fa-list"></i>
            </button>
          </div>

          <!-- 操作按钮 -->
          <div class="flex items-center gap-2">
            <button id="new-folder-btn" class="btn-secondary">
              <i class="fa fa-folder-o mr-1"></i>
              新建文件夹
            </button>
            
            <button id="upload-btn" class="btn-success">
              <i class="fa fa-upload mr-1"></i>
              上传文件
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container mx-auto max-w-7xl p-4">
      <!-- 面包屑导航 -->
      <div class="bg-white rounded-lg border border-neutral-200 p-4 mb-4">
        <nav class="flex items-center gap-2 text-sm">
          <button id="home-breadcrumb" class="flex items-center gap-1 text-primary hover:text-primary/80 transition-colors">
            <i class="fa fa-home"></i>
            <span>我的文件</span>
          </button>
          <div id="breadcrumb-container" class="flex items-center gap-2">
            <!-- 面包屑将通过JavaScript动态生成 -->
          </div>
        </nav>
      </div>

      <!-- 文件上传区域 -->
      <div id="upload-area" class="upload-area bg-white rounded-lg mb-4 text-center hidden relative overflow-hidden">
        <!-- 背景视频装饰 -->
        <div class="absolute inset-0 opacity-5">
          <video autoplay muted loop class="w-full h-full object-cover">
            <source src="/static/image/56.mp4" type="video/mp4">
          </video>
        </div>
        
        <div class="relative z-10 p-8">
          <div class="max-w-md mx-auto">
            <div class="mb-6">
              <!-- 动态上传图标 -->
              <div class="relative inline-block mb-4">
                <div class="w-20 h-20 bg-gradient-primary rounded-full flex items-center justify-center shadow-lg">
                  <i class="fa fa-cloud-upload text-3xl text-white"></i>
                </div>
                <div class="absolute -top-1 -right-1 w-6 h-6 bg-success rounded-full flex items-center justify-center">
                  <i class="fa fa-plus text-white text-xs"></i>
                </div>
              </div>
              
              <h3 class="text-xl font-bold text-neutral-700 mb-2">拖拽文件到此处上传</h3>
              <p class="text-neutral-500">或者点击下方按钮选择文件</p>
            </div>
            
            <input type="file" id="file-input" multiple class="hidden">
            <button id="select-files-btn" class="btn-primary text-lg px-8 py-3 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all">
              <i class="fa fa-plus mr-2"></i>
              选择文件
            </button>
            
            <div class="mt-6 grid grid-cols-2 gap-4 text-xs text-neutral-500">
              <div class="flex items-center gap-2">
                <i class="fa fa-check-circle text-success"></i>
                <span>支持多文件上传</span>
              </div>
              <div class="flex items-center gap-2">
                <i class="fa fa-shield text-primary"></i>
                <span>安全加密传输</span>
              </div>
              <div class="flex items-center gap-2">
                <i class="fa fa-compress text-warning"></i>
                <span>自动压缩优化</span>
              </div>
              <div class="flex items-center gap-2">
                <i class="fa fa-file-o text-neutral-400"></i>
                <span>最大100MB</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 文件列表区域 -->
      <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden">
        <!-- 工具栏 -->
        <div class="border-b border-neutral-200 p-4 flex items-center justify-between">
          <div class="flex items-center gap-4">
            <div class="flex items-center gap-2">
              <input type="checkbox" id="select-all" class="rounded">
              <label for="select-all" class="text-sm text-neutral-600">全选</label>
            </div>
            
            <div id="selected-actions" class="flex items-center gap-2 hidden">
              <span id="selected-count" class="text-sm text-neutral-600"></span>
              <button id="delete-selected-btn" class="text-red-500 hover:text-red-700 text-sm">
                <i class="fa fa-trash mr-1"></i>
                删除选中
              </button>
            </div>
          </div>
          
          <div class="flex items-center gap-4">
            <!-- 排序选择 -->
            <select id="sort-select" class="text-sm border border-neutral-300 rounded px-2 py-1">
              <option value="name">按名称排序</option>
              <option value="date">按日期排序</option>
              <option value="size">按大小排序</option>
              <option value="type">按类型排序</option>
            </select>
            
            <!-- 搜索框 -->
            <div class="relative">
              <input 
                type="text" 
                id="search-input"
                placeholder="搜索文件..."
                class="pl-8 pr-3 py-1 text-sm border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
              >
              <i class="fa fa-search absolute left-2.5 top-1.5 text-neutral-400 text-xs"></i>
            </div>
          </div>
        </div>

        <!-- 文件网格视图 -->
        <div id="grid-view" class="p-4">
          <div id="file-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
            <!-- 文件项将通过JavaScript动态生成 -->
          </div>
        </div>

        <!-- 文件列表视图 -->
        <div id="list-view" class="hidden">
          <div class="overflow-x-auto">
            <table class="w-full">
              <thead class="bg-neutral-50 border-b border-neutral-200">
                <tr>
                  <th class="text-left p-3 text-sm font-medium text-neutral-600">
                    <input type="checkbox" class="rounded">
                  </th>
                  <th class="text-left p-3 text-sm font-medium text-neutral-600">名称</th>
                  <th class="text-left p-3 text-sm font-medium text-neutral-600">大小</th>
                  <th class="text-left p-3 text-sm font-medium text-neutral-600">类型</th>
                  <th class="text-left p-3 text-sm font-medium text-neutral-600">修改时间</th>
                  <th class="text-left p-3 text-sm font-medium text-neutral-600">操作</th>
                </tr>
              </thead>
              <tbody id="file-list">
                <!-- 文件行将通过JavaScript动态生成 -->
              </tbody>
            </table>
          </div>
        </div>

        <!-- 空状态 -->
        <div id="empty-state" class="hidden p-12 text-center relative overflow-hidden">
          <!-- 背景装饰 -->
          <div class="absolute inset-0 opacity-5">
            <div class="w-full h-full bg-gradient-to-br from-purple-400 via-pink-500 to-red-500"></div>
          </div>
          
          <div class="max-w-sm mx-auto relative z-10">
            <!-- 使用静态图片作为装饰 -->
            <div class="w-32 h-32 mx-auto mb-6 relative">
              <div class="absolute inset-0 bg-gradient-primary rounded-full opacity-10"></div>
              <div class="absolute inset-4 bg-white rounded-full shadow-lg flex items-center justify-center">
                <i class="fa fa-folder-open text-4xl text-neutral-400"></i>
              </div>
            </div>
            
            <h3 class="text-xl font-bold text-neutral-700 mb-2">文件夹为空</h3>
            <p class="text-neutral-500 mb-6">开始上传文件或创建新文件夹来管理您的内容</p>
            
            <div class="flex flex-col sm:flex-row gap-3 justify-center">
              <button id="empty-upload-btn" class="btn-primary">
                <i class="fa fa-upload mr-2"></i>
                上传文件
              </button>
              <button id="empty-folder-btn" class="btn-secondary">
                <i class="fa fa-folder-o mr-2"></i>
                新建文件夹
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 文件操作菜单 -->
    <div id="context-menu" class="fixed bg-white border border-neutral-200 rounded-lg shadow-lg py-2 z-50 hidden">
      <button class="context-menu-item w-full text-left px-4 py-2 text-sm hover:bg-neutral-100 flex items-center gap-2">
        <i class="fa fa-eye text-neutral-500"></i>
        预览
      </button>
      <button class="context-menu-item w-full text-left px-4 py-2 text-sm hover:bg-neutral-100 flex items-center gap-2">
        <i class="fa fa-download text-neutral-500"></i>
        下载
      </button>
      <button class="context-menu-item w-full text-left px-4 py-2 text-sm hover:bg-neutral-100 flex items-center gap-2">
        <i class="fa fa-edit text-neutral-500"></i>
        重命名
      </button>
      <div class="border-t border-neutral-200 my-1"></div>
      <button class="context-menu-item w-full text-left px-4 py-2 text-sm hover:bg-neutral-100 flex items-center gap-2 text-red-600">
        <i class="fa fa-trash text-red-500"></i>
        删除
      </button>
    </div>

    <!-- 新建文件夹模态框 -->
    <div id="new-folder-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="flex items-center justify-between p-4 border-b border-neutral-200">
          <h3 class="text-lg font-semibold text-neutral-800">新建文件夹</h3>
          <button id="close-folder-modal" class="text-neutral-400 hover:text-neutral-600">
            <i class="fa fa-times"></i>
          </button>
        </div>
        
        <div class="p-4">
          <label class="block text-sm font-medium text-neutral-700 mb-2">文件夹名称</label>
          <input 
            type="text" 
            id="folder-name-input"
            placeholder="请输入文件夹名称"
            class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          >
          <p class="text-xs text-neutral-500 mt-1">文件夹名称不能包含特殊字符</p>
        </div>
        
        <div class="border-t border-neutral-200 p-4 flex justify-end gap-2">
          <button id="cancel-folder-btn" class="btn-secondary">取消</button>
          <button id="create-folder-btn" class="btn-primary">创建</button>
        </div>
      </div>
    </div>

    <!-- 重命名模态框 -->
    <div id="rename-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="flex items-center justify-between p-4 border-b border-neutral-200">
          <h3 class="text-lg font-semibold text-neutral-800">重命名</h3>
          <button id="close-rename-modal" class="text-neutral-400 hover:text-neutral-600">
            <i class="fa fa-times"></i>
          </button>
        </div>
        
        <div class="p-4">
          <label class="block text-sm font-medium text-neutral-700 mb-2">新名称</label>
          <input 
            type="text" 
            id="rename-input"
            class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          >
        </div>
        
        <div class="border-t border-neutral-200 p-4 flex justify-end gap-2">
          <button id="cancel-rename-btn" class="btn-secondary">取消</button>
          <button id="confirm-rename-btn" class="btn-primary">确认</button>
        </div>
      </div>
    </div>

    <!-- 上传进度模态框 -->
    <div id="upload-progress-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
      <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4">
        <div class="flex items-center justify-between p-4 border-b border-neutral-200">
          <div class="flex items-center gap-3">
            <h3 class="text-lg font-semibold text-neutral-800">文件上传</h3>
            <div id="upload-stats" class="text-sm text-neutral-500">
              <!-- 上传统计信息 -->
            </div>
          </div>
          <div class="flex items-center gap-2">
            <button id="clear-completed-btn" class="text-sm text-neutral-500 hover:text-neutral-700" title="清除已完成">
              <i class="fa fa-trash-o mr-1"></i>
              清除已完成
            </button>
            <button id="close-upload-modal" class="text-neutral-400 hover:text-neutral-600">
              <i class="fa fa-times"></i>
            </button>
          </div>
        </div>
        
        <div class="p-4 max-h-96 overflow-y-auto">
          <div id="upload-progress-list">
            <!-- 上传进度项将通过JavaScript动态生成 -->
          </div>
          
          <!-- 空状态 -->
          <div id="upload-empty-state" class="text-center py-8 text-neutral-500 hidden">
            <i class="fa fa-cloud-upload text-4xl mb-4 text-neutral-300"></i>
            <p>没有正在上传的文件</p>
          </div>
        </div>
        
        <div class="border-t border-neutral-200 p-4 flex items-center justify-between">
          <div class="flex items-center gap-2">
            <button id="pause-all-btn" class="btn-secondary text-sm" title="暂停所有上传">
              <i class="fa fa-pause mr-1"></i>
              暂停全部
            </button>
            <button id="resume-all-btn" class="btn-secondary text-sm" title="继续所有上传">
              <i class="fa fa-play mr-1"></i>
              继续全部
            </button>
            <button id="retry-failed-btn" class="btn-secondary text-sm" title="重试失败的上传">
              <i class="fa fa-refresh mr-1"></i>
              重试失败
            </button>
          </div>
          <button id="close-upload-btn" class="btn-primary">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入应用脚本 -->
  <script src="/js/utils/api.js"></script>
  <script src="/js/utils/auth.js"></script>
  <script src="/js/utils/notification.js"></script>
  <script src="/js/components/file-preview.js"></script>
  <script src="/js/components/file-manager.js"></script>
</body>
</html>